<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
      
  </style>
  <body>
    <div class="div">fds</div>
  </body>
  <script>
    /* 
        根据函数调用方式的不同，this的值也不同；
          1.以函数形式调用，this指向window；
          2.以方法形式调用，this指向调用该方法的对象；
          3.以构造函数形式调用，this指向新创建的对象；
          4.call、apply、bind方法改变this指向；
        5.箭头函数没有自己的this，它的this值取决于外层作用域的this值。
    */
    function sum(a, b) {
      console.log(this, "this");
      return a + b;
    }
    sum(1, 2);
    let obj = { name: "zs", age: 19 };
    function fn(a, b, c) {
      console.log(a, b, c);
      console.log(this, "this");
    }
    //call 可以改变this指向，第一个参数是改变this指向的对象，后面的参数是传递给函数的参数
    fn.call(obj, "a", "b", "c");
    let obj1 = { address: "beijing" };
    //apply 可以改变this指向，第一个参数是改变this指向的对象，第二个参数是传递给函数的参数数组
    fn.apply(obj1, ["a", "b", "qq"]);
    //bind 可以返回一个新的函数，这个函数的this值已经被固定了,后面的参数是传递给函数的参数
    let res = fn.bind({ name: "ls", address: "shanghai" }, "a", "b", "c");
    console.log(res, "res");
    res();
   
  </script>
 
</html>
